<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cv {
        border: 3px solid #999;
      }
    </style>
  </head>
  <body>
    <canvas id="cv" width="200px" height="150px">您的浏览器不支持canvas</canvas>
  </body>
  <script>
    var cv = document.getElementById("cv");
    if (cv.getContext("2d")) {
      var ctx = cv.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(75, 40);
      ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
      ctx.bezierCurveTo(20, 25, 20, 62, 20, 62);
      ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
      ctx.bezierCurveTo(110, 102, 130, 80, 130, 62);
      ctx.bezierCurveTo(130, 62, 130, 25, 100, 25);
      ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
      ctx.lineWidth = 3; //设置线宽
      ctx.strokeStyle = "red"; //设置描边颜色
      // ctx.stroke();//描边
      ctx.fillStyle = "red";//设置填充色
      ctx.fill();//填充
    } else {
      console.log("您的浏览器不支持canvas");
    }
  </script>
</html>
